<template>
  <view class="login-form">
    <!-- <view class="item-inpt">
      <input type="number" @input="(e) => onKeyInput(e, 'phone')" maxlength="11" :styles="{border: 'none'}" placeholder="输入手机号" placeholder-style="colr: '#999999'" />
      <view class="border"></view>
    </view>
    <view class="item-inpt">
      <view class="u-flex u-row-between">
        <input type="number" @input="(e) => onKeyInput(e, 'smsCode')" placeholder-style="colr: '#999999'" placeholder="输入验证码" />
        <view class="code" @click="getCode">{{showText}}</view>
      </view>
      <view class="border"></view>
    </view> -->
    <button type="default" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="btn">
      确定
    </button>
  </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { storage } from '@/utils/utils'
import { TOKEN } from '@/assets/js/config.js'
import { useStore } from '@/store'
// 验证码状态
// const VERIFY_CODE = {
//   START: 0, // 开始
//   GETTING: 1, // 获取ing
//   AGAIN: 2 // 重新获取
// }
const store = useStore()
const { $https } = getCurrentInstance().appContext.config.globalProperties
// const codeType = ref(VERIFY_CODE.START)
// const countDownTime = ref(60)
// const timer = ref(null)
// const phone = ref('')
// const smsCode = ref('')
const emit = defineEmits(['success', 'fail'])
const props = defineProps({
  checked: {
    type: Boolean
  }
})
// const showText = computed(() => {
//   if (codeType.value === VERIFY_CODE.START) {
//     clearInterval(timer.value)
//     return '获取验证码'
//   } else if (codeType.value === VERIFY_CODE.GETTING) {
//     return `${countDownTime.value}S`
//   } else {
//     clearInterval(timer.value)
//     return '重新获取'
//   }
// })
// const onKeyInput = (event, name) => {
//   if (name === 'phone') {
//     phone.value = event.detail.value
//   } else {
//     smsCode.value = event.detail.value
//   }
// }
// const getCode = () => {
//   if (!phone.value.replace(/\s*/g, '') || phone.value.replace(/\s*/g, '').length !== 11) {
//     uni.showToast({
//       title: '请输入正确的手机号码',
//       icon: 'none'
//     })
//   }
//   if (timer.value) {
//     return false
//   }
//   codeType.value = VERIFY_CODE.GETTING
//   $https({
//     url: '/sms/send',
//     type: '',
//     method: 'POST',
//     data: {
//       phone: `86-${phone.value.replace(/\s*/g, '')}`,
//       scene: 'validate'
//     }
//   }).then(res => {
//     if (res.code === 0) {
//       uni.showToast({
//         title: '发送成功',
//         icon: 'none'
//       })
//       countDown()
//     }
//   })
// }
// const countDown = () => {
//   timer.value = setInterval(() => {
//     if (countDownTime.value <= 0) {
//       codeType.value = VERIFY_CODE.AGAIN
//       countDownTime.value = 60
//       clearInterval(this.timer)
//       timer.value = null
//     } else {
//       countDownTime.value--
//     }
//   }, 1000)
// }
const getphonenumber = (e) => {
  if (!props.checked) {
    uni.showToast({
      title: '请阅读并勾选下方《品客聚精彩用户协议》和《隐私保护协议》',
      icon: 'none'
    })
    return false
  }
  defaultLoginFun()
}
const defaultLoginFun = () => {
  const rmd = storage.get('recommendCustomerId')
  $https({
    url: '/login',
    type: '',
    method: 'POST',
    data: {
      type: 'phone', // 有openid代表微信登录手机，phone代表手机登录
      recommendCustomerId: rmd,
      openId: '',
      nickName: '',
      registerFrom: '',
      registerPhoneType: 'MP',
      scene: 'mp4'
    }
  }).then(async res => {
    if (res.code === 0) {
      storage.set(TOKEN, res.data.token)
      $https({
        url: '/profile',
        type: ''
      }).then(profile => {
        if (profile.code === 0) {
          store.commit('setProfile', res.data)
          emit('success')
        }
      })
    } else {
      emit('fail', res.msg)
    }
  })
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.login-form{
  font-size: 28rpx;
  .item-inpt{
    position: relative;
    padding: 40rpx 0;
  }
  .border{
    @include border(bottom, #ddd)
  }
  .code{
    width: 180rpx;
    text-align: center;
    color: #333333;
    font-weight: 400;
  }
  .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 84rpx;
    border-radius: 42rpx;
    background: #000000;
    color: #ffffff;
    margin-top: 90rpx;
    &:active{
      opacity: 0.8;
    }
  }
}
</style>
